
$(function () {
    // 功能1: 渲染二级分类信息,和分页控件到页面上
    //全局变量: 当前页 currentPage 每页显示长度: pageSize
    var currentPage = 1;
    var pageSize = 5;
    render();
    function render() {
        $.ajax({
            url: '/category/querySecondCategoryPaging',
            type: 'get',
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function (info) {
                console.log(info);
                // 渲染二级分类信息
                $('tbody').html(template('tmp-second', info));

                // 渲染 分页控件
                $(".pag-second").bootstrapPaginator({
                    //设置版本号
                    bootstrapMajorVersion: 3,
                    // 显示第几页
                    currentPage: currentPage,
                    // 总页数
                    totalPages: Math.ceil(info.total / pageSize),
                    //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
                    onPageClicked: function (event, originalEvent, type, page) {
                        // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
                        currentPage = page
                        render();
                    }
                })
            }
        });
    }

    //功能2: 渲染一级分类数据(l利用模板引擎)
    $.ajax({
        url: '/category/queryTopCategoryPaging',
        type: 'get',
        data: {
            page: 1,
            pageSize: 10000
        },
        dataType: 'json',
        success: function (info) {
            console.log(info);
            $('.cate-menu').html(template('tmp-category', info));

        }
    });

    // 功能3: 点击模态框中一级分类中的数据1:让请输入一级分类文字变成选中的数据2;并所属分类的id赋值给隐藏域的value,3:更新字段状态
    $('.cate-menu').on('click', 'li', function () {
        // 让请输入一级分类文字变成选中的数据
        $('.check-cate').text($(this).text());
        // 给隐藏value赋值为选中的所属分类的id
        //需要在渲染一级分类数据同时,将所属分类id保存在date-id属性中
        $('#categoryId').val($(this).data('id'));
        // 更新字段状态
        $('#form').data('bootstrapValidator').updateStatus('categoryId', 'VALID');
    });

    //功能4: 图片上传,并将路径赋值给img的src,和隐藏域的value,在done事件中更新字段状态
    $("#fileupload").fileupload({
        dataType: "json",
        //e：事件对象
        //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
        done: function (e, data) {//done: 后台保存图片成功触发
            console.log(data);
            // data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
            // console.log(data.result.picAddr);
            //将图片路径赋值给img
            $('#img').attr('src', data.result.picAddr);
            //给隐藏域的value赋值
            $('#brandLogo').val(data.result.picAddr);
            // 更新字段状态
            $('#form').data('bootstrapValidator').updateStatus('brandLogo', 'VALID')
        }
    });

    // 功能5: 验证模态框中表单的数据规则
    $('#form').bootstrapValidator({
        //隐藏域默认是不会被校验的
        excluded: [],
        //根据验证结果显示各种样式
        feedbackIcons: {//根据验证结果显示的各种图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        //验证字段(表单的name属性)
        fields: {
            categoryId: {
                validators: {
                    notEmpty: {
                        message: '请选择一级分类'
                    }
                }
            },
            brandName: {
                validators: {
                    notEmpty: {
                        message: '请选择二级分类'
                    }
                }
            },
            brandLogo: {
                validators: {
                    notEmpty: {
                        message: '请上传品牌logo图片'
                    }
                }
            }
        }
    });

    // 功能6: 表单上传
     $('#form').on('success.form.bv', function (e) {
         //阻止submit按钮的默认行为
         e.preventDefault();
         //发送ajax请求
         $.ajax({
             url: '/category/addSecondCategory',
             type: 'post',
             data: $('form').serialize(),
             dataType: 'json',
             success: function (info) {
                 if (info.success) {
                     //成功: 1.关闭模态框 2.让当前页数为第一页,并重新渲染二级分类信息,和分页控件 3.清空模态框中的样式和内容 4. 手动恢复表单项以外的内容
                    //  关闭模态框
                    $('#first-modal').modal('hide');
                    //让当前页数为第一页,并重新渲染二级分类信息,和分页控件
                    currentPage = 1;
                    render();
                    //重置模态框中form表单的样式和内容,
                    //注意: 按钮和图片并不属于表单项中,所有需要手动重置
                    $('#form').data('bootstrapValidator').resetForm(true);
                    // 4. 手动恢复表单项以外的内容
                    $('.check-cate').text('请输入一级分类');
                    $('#img').attr('src', './images/none.png');
                 } else {
                    // 失败: 关闭模态框
                    $('#first-modal').modal('hide');
                 }
             }
         })
     })  
});